<style lang="scss">
@import "./index.scss";
@import "./lesson.scss";

$cls: '.z-page-lesson-detail';
#{$cls} {
  image-rendering: pixelated;
  background-color: #f3f8ff;

  .chart {
    height: 230px;
  }

  .z-crud-table__hight_sef {
    padding: 5px 10px;
  }

  &__banner {
    position: relative;
    background-size: 100%;
    @include aspect-ratio(1362, 170, '#{$cls}__banner-content');
    margin-bottom: 10px;
  }

  &__logo {
    position: absolute;
    left: 12px;
    top: 12px;
  }

  &__title {
    height: 37px;
    font-size: 36px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 1;
    top: 44px;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
  }

  &__detail {
    width: 170px;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 106px;
    cursor: pointer;
  }

  &__actions {
    right: 20px;
    top: 20px;
    position: absolute;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    z-index: 11;
  }

  &__logoout {
    cursor: pointer;
  }

  &__header-gutter {
    display: inline-block;
    width: 1px;
    height: 14px;
    background-color: #fff;
    vertical-align: top;
    margin-right: 5px;
    margin-left: 3px;
    transform: translateY(3px);
  }

  .z-crud-table__change-view {
    display: none !important;
  }

  .z-crud-table__actions {
    background-color: #fff;
    box-shadow: 0px 2px 5px 0px rgba(111, 128, 146, 0.1);
    border-radius: 4px;
    margin-bottom: 10px;
  }

  .z-page-lesson-detail__tabs {
    //font-size: 14px;
    sp-tab {
      font-size: 14px;
      padding-bottom: 5px;
      padding-top: 5px;
    }

    margin-left: 10px;
  }

  .z-crud-table__buttons-left {
    display: none !important;
  }

  .z-table {
    background-color: transparent;
  }

  .z-table__page {
    display: none;
  }

  .inf-item {
    padding: 5px;
    background: #FFFFFF;
    box-shadow: 0px 2px 5px 0px rgba(111, 128, 146, 0.1);

    &__img {
      //@include aspect-ratio(204, 168, '.inf-item__img-con');
      background-color: #eee;
      margin-bottom: 10px;
    }

    &__content {
      color: #848484
    }

    font-size: 12px;
  }

  .z-com-grid {
    height: auto;
  }

  [role=listitem] {
    margin-bottom: 15px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.z-page-lesson-detail__popper {
  padding: 5px;
  font-size: 12px;
  line-height: 20px;
}

.z-page-lesson-detail__card {
  box-shadow: none;
 .el-card__header {
    background: #517EFF;
    border-radius: 4px 4px 0px 0px;
   color: #fff;
   padding: 6px 10px;
   font-size: 16px;
  }
  .el-card__body {
    padding: 0;
    min-height: 200px;
  }
  .el-empty__description {
    margin-top: 0;
  }
}

.z-page-lesson-detail__body {
  padding: 10px;
  box-sizing: border-box;
}

</style>

<template>
  <div class="z-page-lesson-common z-page-lesson-detail">
    <div class="r-lesson-detail__img_banner z-page-lesson-detail__banner">
      <div class="z-page-lesson-detail__banner-content">
        <img class="z-page-lesson-detail__logo" :src="PAGE_ICONS.logo">
        <div class="z-page-lesson-detail__title">页面标题（某某系统/平台）</div>
        <img class="z-page-lesson-detail__detail" :src="PAGE_ICONS.lesson_detail.btn1">
        <div class="z-page-lesson-detail__actions">
          <el-popover
              placement="bottom"
              title=""
              width="150"
              trigger="hover"
              popper-class="z-page-lesson-detail__popper"
          >
            <span slot="reference">欢迎 Admin </span>
            <div>
              <zw-row
                  class="z-page-lesson-detail__action"
                  style="grid-template-columns: 40px 1fr;">
                <div>部门</div>
                <div>研发部</div>
              </zw-row>
              <zw-row
                  class="z-page-lesson-detail__action"
                  style="grid-template-columns: 40px 1fr;">
                <div>岗位</div>
                <div>设计师</div>
              </zw-row>
              <zw-row
                  class="z-page-lesson-detail__action"
                  style="grid-template-columns: 40px 1fr;">
                <div>位置</div>
                <div>苏州吴中区</div>
              </zw-row>
            </div>
          </el-popover>
          <span class="z-page-lesson-detail__header-gutter"></span>
          <span class="z-page-lesson-detail__logoout">退出</span></div>
        <!--        <div class="r-lesson-detail__logo z-page-lesson-detail__logo"></div>-->
      </div>
    </div>
    <zw-row
        class="z-page-lesson-detail__body"
        style="grid-template-columns: 230px 1fr 230px"
        gutter="12px">
      <div class="z-page-lesson-common__card">
        <z-tree class="z-case-tree" :data="treeData"
        ></z-tree>
      </div>
      <div>
        <z-crud-table
            :request="obj.request"
            :obj="obj.tableOption"
            default-mode="ZComGridView"
            v-if="inited"
        >
          <template #z-crud-table__table__content_search-btn>
            筛选 <i class="el-icon-arrow-down"></i>
          </template>
          <template #z-crud-table__table__action-con_beforeend="scope">
            <zw-tabs class="z-tabs z-page-lesson-detail__tabs" :selected="1"
            @change="onTabChange"
            >
              <z-fragment v-for="(tab, index) in tabs">
                <sp-tab :label="tab" :value="''+index"></sp-tab>
                <sp-tab-panel :value="''+index"></sp-tab-panel>
              </z-fragment>
            </zw-tabs>

          </template>
          <template #content="scope">1111
          </template>
        </z-crud-table>
      </div>
      <div>
        <z-space column-gap="14px" vertical>
          <el-card class="z-page-lesson-detail__card" shadow="never">
            <div slot="header" class="z-page-lesson-detail__card-header">
              <span>&nbsp;</span>
            </div>
            <z-chart class="chart" :option="chartOption" />
          </el-card>

          <el-card class="z-page-lesson-detail__card" shadow="never">
            <div slot="header" class="z-page-lesson-detail__card-header">
              <span>卡片名称</span>
              <!--            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
            </div>
            <el-empty style="padding: 0" description="暂无课程">
              <template slot="image">
                <img :src="PAGE_ICONS.lesson_detail.empty">
              </template>
            </el-empty>
          </el-card>
        </z-space>
      </div>
    </zw-row>
  </div>
</template>

<script>
import {ZPageMixin} from "@/zpkgs/components/z-pages/ZPageMixin";


export default {
  name: 'ZPageLessonDetail',
  components: {},
  mixins: [
    ZPageMixin
  ],
  data() {
    return {
      inited: false,
      obj: {},
      tabs: [
          '普通课程',
          '普通专题'
      ],
      chartOption: {
        // title: {
        //   text: "Traffic Sources",
        //   left: "center"
        // },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
          position: [20, 20]
        },
        legend: {
          // orient: "vertical",
          // left: "left",
          data: [
            "线下学习",
            "线上学习",
          ]
        },
        color:['#5782ff', '#fd9437'],
        series: [
          {
            // name: "Traffic Sources",
            type: "pie",
            radius: ['20%', '35%'],
            // center: ['50%', '50%'],
            // avoidLabelOverlap: false,
            label:{
              show: true,
              // position: ['inside ', 'inside '],
              // distance: 50,
              // offset: [10,-10],
              align: 'left',
              formatter(val){
                // console.log("label汉字--",val);
                var strs = val.name.split(''); //字符串数组
                var str = ''
                for(let i = 0, s; s = strs[i++];) { //遍历字符串数组
                  str += s;
                  if(!(i % 2)) str += '\n'; //按需要求余
                }
                return str + ` ${val.percent}%`
              }
            },
            data: [
              { value: 335, name: "线下学习" },
              { value: 310, name: "线上学习" },
            ],
            labelLine: { //label线的长度
              normal: {
                length: 5, // 改变标示线的长度
                length2: 5,
                maxSurfaceAngle: 80,
                lineStyle: {
                  color: "#333"  // 改变标示线的颜色
                }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      treeData: [
        {
          label: '一级 1',
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1',
            },
            {
              label: '二级 2-2',
            }
          ]
        },
      ]
    }
  },
  methods: {
    onTabChange(e) {
      console.log('onTabChange', e)
    }
  },
  mounted() {
    let comDef = {
      name: 'w-item-com',
      template: `
        <zw-row class="inf-row" gutter="15px" :class="['inf-row-' + index]">
        <zw-col class="inf-item" span="6" v-for="(col, colIndex) in source.row">
         <zw-div aspect="192:111" class="inf-item__img"></zw-div>
          <z-space vertical >
            <div class="inf-item__title">主标题</div>
            <div class="inf-item__content">当前任务</div>
          </z-space>
        </zw-col>
        </zw-row>
      `,
      props: {
        index: { // index of current item
          type: Number
        },
        source: { // here is: {uid: 'unique_1', text: 'abc'}
          type: Object,
          default() {
            return {}
          }
        }
      },
      created() {
        // console.log(this.source)
      }
    }
    CustomCusComponent.register(comDef)
    setTimeout(() => {
      this.obj = {
        request: window.Req,
        tableOption: {
          defaultUrl: '/api/list',
          viewProps: {
            itemComponentName: comDef.name
          }
        }
      }
      this.inited = true
    }, 30)
  }
}
</script>
